<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-content">
          <img style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
          <div>
            <img src="@/img.png" alt="Logo-text" style="height: 45px;margin-top: 30px" class="header-logotext">
            <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
          </div>
          <div class="avatar">
            <el-avatar :size="55" :icon="UserFilled"/>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu router default-active="1">
            <el-menu-item style="height: 100px" index="announcement-management" class="first">
              <el-icon>
                <location/>
              </el-icon>
              <span>公告发布</span>
            </el-menu-item>
            <el-menu-item style="height: 100px" index="complaints-management">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>投诉管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px" index="visitor-management">
              <el-icon>
                <document/>
              </el-icon>
              <span>访客通行</span>
            </el-menu-item>
            <el-menu-item style="height: 100px" index="park-management">
              <el-icon>
                <setting/>
              </el-icon>
              <span>车位管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px" index="maintenance-management">
              <el-icon>
                <setting/>
              </el-icon>
              <span>报事处理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px" index="payment-management">
              <el-icon>
                <setting/>
              </el-icon>
              <span>缴费记录</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <div class="m-4">
            <h2 style="margin-left: 80px;margin-top: 40px">缴费记录</h2>
            <el-divider></el-divider>
          </div>
          <el-table
              :data="tableData"
              :span-method="objectSpanMethod"
              border
              style="width: 100%; margin-top: 20px">
            <el-table-column
                prop="name"
                label="用户名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="payType"
                label="缴费类型">
            </el-table-column>
            <el-table-column
                prop="userId"
                v-if="false">
            </el-table-column>
            <el-table-column
                prop="payMoney"
                label="缴费金额">
            </el-table-column>
            <el-table-column
                prop="payState"
                label="缴费状态">
            </el-table-column>
            <el-table-column
                prop="payTime"
                label="缴费时间">
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text"  @click="handleReminder(scope.row)">
                  催一下
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {UserFilled} from '@element-plus/icons-vue'
import {
  View,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {ref} from 'vue';
import {onMounted} from "vue";
import *as queryAllUser from "../api/admin"
import *as stratafees from "../api/stratafees"
import *as announcement from '../api/announcement-management'

import {useStore} from "vuex";


const props = defineProps({
  multiple: Boolean,
})
const handleClick = () => {
  console.log('click')
}
const tableData = ref([]);

const item = ref([]);
const store = useStore();
onMounted(() => {

  queryAllUser.allUser().then((resName) => {
    for (let i = 0; i < resName.data.data.length; i++) {
      stratafees.queryStratafeesById({userId: resName.data.data[i].userId}).then((resOther) => {
        for (let j = 0; j < resOther.data.length; j++) {
          tableData.value.push({
            name: resName.data.data[i].name,
            userId:resName.data.data[i].userId,
            payType: resOther.data[j].payType,
            payMoney: resOther.data[j].payMoney,
            payState: resOther.data[j].payState,
            payTime: resOther.data[j].payTime,
          })
        }
      })
    }
  })
  console.log(tableData.value);
});

let prevUserName = ''; // 用于存储上一行的用户名
// 修改后的 objectSpanMethod 实现
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) { // 只对第一列（用户名称）进行合并
    if (row.name === prevUserName) {
      // 如果当前行的用户名与上一行相同，不进行任何操作，因为上一行已经设置了合并
      return { rowspan: 0, colspan: 0 }; // 返回 { rowspan: 0, colspan: 0 } 以避免渲染额外的单元格
    } else {
      // 如果不同，更新prevUserName，并计算需要的rowspan（即当前相同用户名的连续行数）
      prevUserName = row.name;
      let nextRowIndex = rowIndex + 1;
      let rowspan = 1; // 初始化rowspan为1，至少包含当前行
      while (nextRowIndex < tableData.value.length && tableData.value[nextRowIndex].name === row.name) {
        rowspan++;
        nextRowIndex++;
      }
      // 只在第一列设置rowspan，其他列正常显示
      return { rowspan, colspan: 1 };
    }
  }
  return { rowspan: 1, colspan: 1 }; // 其他列或情况不进行合并处理，但也需要返回一个对象
};
const handleReminder = (row) => {

  const notice={
    userId:row.userId,
    noticeText:"请"+row.name+"尽快交交"+row.payType+"金额为："+row.payMoney,
    noticeType:"缴费通知"
  }
  announcement.announcement_add(notice).then((res)=>{

  })
  alert(`发送催促通知给: ${row.name}`);

};
</script>
<style scoped>
.common-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* 隐藏滚动条 */
}

.avatar {
  margin-left: 400px;
}

.header-logo {
  float: left;
  width: 100px;
  height: auto;
  margin-top: 10px;
  margin-left: -175px;
}

.header-logotext {
  margin-top: 40px;
}

.header-content {
  display: flex;
  align-items: center;
  border-width: 1px;
  border-bottom-style: groove;
  border-bottom-color: #cccccc;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 100%; /* 可根据实际情况调整，确保内容不会溢出 */
}

.aside {
  position: absolute;
  top: 160px;
  left: 0;
  bottom: 0;
  width: 200px;
  height: calc(100% - 60px);
  border: 1px solid #ccc;
}

span {
  font-size: 18px;
}

.first {
  margin-top: 0px;
}

.main {
  flex: 1; /* main占据剩余空间 */
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 200px;
  right: 0;
  bottom: 0;
}

.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0px 20px; /* 添加内边距以防止内容贴近边缘 */
}

.category-menu {
  list-style-type: none;
  padding-left: 0;
}

.category-menu li {
  margin-bottom: 10px;
}

.category-menu li.active {
  font-weight: bold;
}

.button1 {
  width: 80px;
  height: 30px;
  color: white;
  background: dodgerblue;
  margin-left: 950px;
}

.button2 {
  width: 80px;
  height: 30px;
  margin-right: 30px; /* 根据需要调整间距 */
  color: white;
  background: red;
}

.yichu {
  color: red;
}
</style>